<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax 数据请求</title>
</head>
<body>
    <ul id="members"></ul>
    <script>
        // js 异步主动请求数据 界面的动态更新
        // console.log(('https://api.github.com/orgs/lemoncode/members'))
        // url 接口地址 
        // 网络请求 request
        // response
        // toJSON
        // dom 
        // httpRequest XML? 可以主动发起http 请求响应是(XML) , JSON的对象
        const xhr = new XMLHttpRequest();
        console.log(xhr.readyState,'------'); // 0
        //  打开一个请求
        // false 同步请求 默认为 true 同步请求
        xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members',false);
        // 真正发送请求出去
        console.log(xhr.readyState,'|-----'); // 1
        xhr.send();
        console.log(xhr.readyState,'||----'); // 1
        //  监听请求状态
        console.log(xhr.readyState,'|||----');
        console.log(xhr.responseText); // false的时候 因为是同步请求 (false)，send() 方法会阻塞代码执行，直到请求完成或失败。
        xhr.onreadystatechange = function() {
            console.log(xhr.readyState,'|||---'); // 4
            // status 响应的状态码
            // readyState 4 表示请求成功
            if(xhr.status === 200 && xhr.readyState === 4) {
                console.log(xhr.responseText);
                const data = JSON.parse(xhr.responseText);
                console.log(data);
                document.getElementById('members').innerHTML = data.map(member => `<li>${member.id}</li>`).join('');
            }
        }
    </script>
</body>
</html>